<template>
	<div class="to-top" @click="goToTop" :class="isShowTopBtn ? 'showBtn' : ''">
		<img src="../assets/img/top.png" />
	</div>
</template>

<script>
export default {
	props: {
		id: {
			type: String,
			default: () => "top",
		},
	},
	data() {
		return {
			isShowTopBtn: false,
		};
	},
	methods: {
		goToTop() {
			document.querySelector(`#${this.id}`).scrollIntoView({
				block: "start",
				behavior: "smooth",
			});
		},
		handlerScrool() {
			if (document.documentElement.scrollTop > 150) {
				this.isShowTopBtn = true;
			} else {
				this.isShowTopBtn = false;
			}
		},
	},
	mounted() {
		window.addEventListener("scroll", this.handlerScrool);
	},
	destroyed() {
		window.removeEventListener("scroll", this.handlerScrool);
	},
	watch: {},
	computed: {},
};
</script>
<style lang='scss' scoped>
.to-top {
	position: fixed;
	bottom: -80px;
	right: 6%;
	z-index: 10;
	transition: all 0.5s;
	img {
		width: 50px;
		cursor: pointer;
		opacity: 0.5;
	}
	&:hover {
		transform: translateY(-15px);
	}
}
.showBtn {
	bottom: 40px;
}
</style>